import React, { useEffect } from "react";
import "./index.scss";
import * as echarts from "echarts";
function Work() {
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["新增总表单(份)", "新增被浏览(次)"],
      icon: "circle",
      bottom: -5,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["01-10", "01-11", "01-12", "01-13", "01-14", "01-15", "01-16"],
    },
    yAxis: {
      type: "value",
      splitLine: {
      show: true,  // 显示网格线
      lineStyle: {
        type: 'dashed',  // 设置为虚线
        color: '#EBEEF6',   // 设置虚线的颜色
        width: 2        // 设置虚线的宽度
      }
    }
    },
    series: [
      {
        name: "新增总表单(份)",
        type: "line",
        stack: "Total",
        color: "#5470c6",
        data: [0, 0, 0, 0, 0, 0, 0],
      },
      {
        name: "新增被浏览(次)",
        type: "line",
        stack: "Total",
        color: "#F6AE1B",
        data: [0, 0, 0, 0, 0, 0, 0],
      },
    ],
  };

  useEffect(() => {
    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption(option);
  }, []);

  return (
    <div className="work">
      <div className="left">
        <span>活跃周报</span>
        <span>1.06-1.12</span>
        <button className="btn">去制作</button>
        <div className="bottom">
          <dl>
            <dt>0</dt>
            <dd>
              <p>下载作品</p>
              <p>周对比&ensp;0</p>
            </dd>
          </dl>
          <dl>
            <dt>0</dt>
            <dd>
              <p>创作作品</p>
              <p>周对比&ensp;0</p>
            </dd>
          </dl>
          <dl>
            <dt>0</dt>
            <dd>
              <p>积分获取</p>
              <p>周对比&ensp;0</p>
            </dd>
          </dl>
        </div>
      </div>
      <div className="right">
        <p>数据分析</p>
        <div style={{ width: "100%", height: "300px" }}>
          <div
            id="main"
            style={{ width: "100%", height: "250px", marginTop: "-50px" }}
          ></div>
        </div>
      </div>
    </div>
  );
}

export default Work;